<template>
  <div class="teacher-course main-contianer3">
    <ul class="tabs flex-row">
      <li :class="['tab', { 'active': tabId == 1 }]" @click="changeTab(1)">学习进度</li>
      <li :class="['tab', { 'active': tabId == 2 }]" @click="changeTab(2)">任务管理</li>
      <li :class="['tab', { 'active': tabId == 3 }]" @click="changeTab(3)">在线课堂</li>
      <li :class="['tab', { 'active': tabId == 4 }]" @click="changeTab(4)">学情分析</li>
    </ul>
    <div style="margin-top: 10px;"></div>
    <!--<SelectCourseClass class="top-select" />-->
    <router-view v-if="$route.name === 'onlineLessonView' || $route.name === 'onlineHistory'"/>
    <div v-else>
      <StudyProgress v-if="tabId === 1"/>
      <TaskManage v-if="tabId === 2"/>
      <OnlineLesson v-if="tabId === 3"/>
      <LearnAnalys v-if="tabId === 4"/>
    </div>
  </div>
</template>

<script>
import StudyProgress from './studyProgress/StudyProgress'
import TaskManage from './taskManage/TaskManage'
import LearnAnalys from './learnAnalys/LearnAnalys'
import OnlineLesson from './onlineLesson/OnlineLesson'
// import SelectCourseClass from '@/components/SelectCourseClass'

export default {
  name: 'Course',
  components: {
    StudyProgress,
    TaskManage,
    LearnAnalys,
    OnlineLesson
    // SelectCourseClass
  },
  data () {
    return {
      tabId: 1
    }
  },
  mounted () {
  },
  methods: {
    changeTab (tab) {
      this.tabId = tab
    }
  }
}
</script>

<style scoped lang="scss" rel="stylesheet/scss">
.teacher-course {
  .tabs {
    width: 100%;
    justify-content: flex-start;
    background: #fff;
    .tab {
      width: 25%;
      text-align: center;
      font-size: 20px;
      height: 50px;
      line-height: 50px;
      color: #101d37;
      cursor: pointer;
      &.active {
        color: #009CF6;
        position: relative;
        // background: #009CF6;
        &::after {
           content: '';
          display: inline-block;
          width: 50px;
          border-bottom: 5px solid #009CF6;
          position: absolute;
          bottom: 0;
          border-radius: 10px;
          left: 50%;
          transform: translate(-50%);
        }
      }
    }
  }
  .top-select {
    padding: 20px;
    border: none;
    background: #fff;
  }
}
</style>
